<!doctype html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>订单详情</title>
		<link rel="stylesheet" href="http://www.xyshopping.com:8848/qianduan/resources/css/bootstrap.min.css" type="text/css" />
		<script src="http://www.xyshopping.com:8848/qianduan/resources/js/jquery-1.11.3.min.js" type="text/javascript"></script>
		<script src="http://www.xyshopping.com:8848/qianduan/resources/js/bootstrap.min.js" type="text/javascript"></script>
		<script type="text/javascript" src="http://www.xyshopping.com:8848/qianduan/resources/js/jquery-heima-0.0.1.js"></script>
		<script type="text/javascript" src="http://www.xyshopping.com:8848/qianduan/resources/js/heima-include.js"></script>
		<script>
			$(function(){
				var oid = HM.getParameter("oid");
				HM.ajax("/order?md=info","oid="+oid,function(vo){
					//获取订单数据
					var order = vo.data;
					var vos = order.vos;
					var html="<tr class=\"warning\">\n" +
						"\t\t\t\t\t\t\t\t\t\t<th colspan=\"2\">\n" +
						"\t\t\t\t\t\t\t\t\t\t\t订单编号:"+order.oid+"\n" +
						"\t\t\t\t\t\t\t\t\t\t</th>\n" +
						"\t\t\t\t\t\t\t\t\t\t<th colspan=\"1\">订单状态:"+code2str(order.state)+" </th>\n" +
						"\t\t\t\t\t\t\t\t\t\t<th colspan=\"2\">下单时间:"+time2str(order.ordertime)+" </th>\n" +
						"\t\t\t\t\t\t\t\t\t</tr>\n" +
						
						"\t\t\t\t\t\t\t\t\t<tr class=\"warning\">\n" +
						"\t\t\t\t\t\t\t\t\t\t<th>图片</th>\n" +
						"\t\t\t\t\t\t\t\t\t\t<th>商品</th>\n" +
						"\t\t\t\t\t\t\t\t\t\t<th>价格</th>\n" +
						"\t\t\t\t\t\t\t\t\t\t<th>数量</th>\n" +
						"\t\t\t\t\t\t\t\t\t\t<th>小计</th>\n" +
						"\t\t\t\t\t\t\t\t\t</tr>\n" ;
						
					for(vo of vos){
						html += "\t\t\t\t\t\t\t\t\t<tr class=\"active\">\n" +
						"\t\t\t\t\t\t\t\t\t\t<td width=\"60\" width=\"40%\">\n" +
						"\t\t\t\t\t\t\t\t\t\t\t<img src=\"http://www.xyshopping.com:8848/qianduan/"+vo.pimage+"\" width=\"70\" height=\"60\">\n" +
						"\t\t\t\t\t\t\t\t\t\t</td>\n" +
						"\t\t\t\t\t\t\t\t\t\t<td width=\"30%\">\n" +
						"\t\t\t\t\t\t\t\t\t\t\t<a target=\"_blank\"> "+vo.pname+"</a>\n" +
						"\t\t\t\t\t\t\t\t\t\t</td>\n" +
						"\t\t\t\t\t\t\t\t\t\t<td width=\"20%\">\n" +
						"\t\t\t\t\t\t\t\t\t\t\t￥"+vo.price+"\n" +
						"\t\t\t\t\t\t\t\t\t\t</td>\n" +
						"\t\t\t\t\t\t\t\t\t\t<td width=\"10%\">\n" +
						"\t\t\t\t\t\t\t\t\t\t\t"+vo.count+"\n" +
						"\t\t\t\t\t\t\t\t\t\t</td>\n" +
						"\t\t\t\t\t\t\t\t\t\t<td width=\"15%\">\n" +
						"\t\t\t\t\t\t\t\t\t\t\t<span class=\"subtotal\">￥"+vo.subtotal+"</span>\n" +
						"\t\t\t\t\t\t\t\t\t\t</td>\n" +
						"\t\t\t\t\t\t\t\t\t</tr>"
					}
					$("tbody").append(html);
					$("#total").html(order.total);
					
					if(order.state == 1){
						$("#payBtnContainer").hide();
						
						//填充收货人信息
						$("[name='address']").val(order.address).attr("disabled","disabled");
						$("[name='name']").val(order.name).attr("disabled","disabled");
						$("[name='telephone']").val(order.telephone).attr("disabled","disabled");
					}
				})
			})
			//状态码转成 对应字符串
			function code2str(code){
				if(code == 0){
					return "未付款"
				}
				if(code == 1){
					return "已付款"
				}
				if(code == 2){
					return "已发货"
				}
				if(code == 3){
					return "已完成"
				}
			}
			//毫秒值转成 年月日时分秒
			function time2str(ms){
				//js中没有simpleDataFormat
				var date = new Date(ms)
				var year = date.getFullYear();
				var month = date.getMonth() + 1;
				var day = date.getDay();
				var hour = date.getHours();
				var min = date.getMinutes();
				var s = date.getSeconds();
				return "" + year +"-"+month+"-"+day+" "+ hour+":" + min +":" + s;
			}
			
			//为确认订单按钮绑定点击事件
			function toPay(){
				//提交参数 oid 收货人信息
				var oid = HM.getParameter("oid");
				var shr = $("#shr").serialize();
				var params = "oid="+oid+"&"+shr;
				
				//不能使用ajax发送请求了
				// HM.ajax("/order?md=toPay",params,function(vo){
					
				// })
				
				//直接在地址栏携带参数跳转，服务器仍然可以拿到参数
				location.href="http://api.xyshopping.com:8080/order?md=toPay&"+params;
			}
		</script>
	</head>

	<body>
		<div class="container-fluid">
			<!--头部-->
			<div id="header" style="min-height: 130px;"></div>
			<div class="container">
				<div class="row">
					<div style="margin:0 auto;margin-top:10px;width:950px;">
						<strong>订单详情</strong>
						<table class="table table-bordered">
							<tbody>

							</tbody>
						</table>
					</div>

					<div style="text-align:right;margin-right:120px;">
						商品金额: <strong style="color:#ff6600;">￥<span id="total">0.0</span>元</strong>
					</div>

				</div>

				<div class="">
					<hr />
					<form class="form-horizontal" style="margin-top:5px;margin-left:150px;" id="shr">
						<div class="form-group">
							<label for="username" class="col-sm-1 control-label">地址</label>
							<div class="col-sm-5">
								<input type="text" class="form-control" name="address" placeholder="请输入收货地址">
							</div>
						</div>
						<div class="form-group">
							<label for="inputPassword3" class="col-sm-1 control-label">收货人</label>
							<div class="col-sm-5">
								<input type="text" class="form-control" name="name" placeholder="请输收货人">
							</div>
						</div>
						<div class="form-group">
							<label for="confirmpwd" class="col-sm-1 control-label">电话</label>
							<div class="col-sm-5">
								<input type="text" class="form-control" name="telephone" placeholder="请输入联系方式">
							</div>
						</div>
					</form>

					<hr />

					<div style="margin-top:5px;margin-left:150px;" id="payBtnContainer">

						<p style="text-align:right;margin-right:100px;">
							<a href="javascript:;" onclick="toPay()">
								<img src="http://www.xyshopping.com:8848/qianduan/resources/img/finalbutton.gif" width="204" height="51" border="0" />
							</a>
						</p>
						<hr />

					</div>
				</div>

			</div>
			<!--尾部-->
			<div id="footer" style="min-height: 203px;"></div>
		</div>
	</body>

</html>
